<script setup lang="tsx">
import CmsComponents from '@cms/components'
import Scrollbar from '@cms/scrollbar'

const {
  CmsSearchBar,
  CmsCategoryGrid,
  CmsRecommendGrid,
  CmsVipPay,
  CmsVipMember,
  CmsBuyOrder,
  CmsLabelView,
  CmsButtonStyle,
  CmsRenewView,
  CmsFilterView,
  CmsVarietyList,
  CmsSelectWorks,
  CmsCardView,
  CmsScrollGrid,
  CmsGridView,
  CmsRotationView,
  CmsNovelGrid,
  CmsNovelList,
  CmsBottomFunction,
  TabCardView,
  CmsArticleTags,
  CmsArticleSetting,
  CmsNoticeBar,
  CmsFavoritesRead,
  CmsProfileButton,
  CmsScoreView,
  CmsHeaderTabbar,
  CmsAtlasArea,
  CmsFilmmakersFilter,
  CmsStarGrid,
  CmsVideoHeader,
  CmsPlayerView,
  CmsVideoIntroduction,
  CmsPlayerLines,
  CmsVideoView,
  CmsVideoName,
  CmsVideoNumber,
  CmsVideoLabel,
  CmsActorList,
  CmsPlayerVideoIntroduction,
  CmsActorAvatar,
  CmsActorDescription,
  CmsActorWorks,
  CmsArticleImg,
  CmsArticleState,
  CmsAtlasLsit,
  CmsArticleIntroduction,
  CmsBottomBar,
  CmsBannerAdv,
  CmsSuspendAdv,
  CmsBeforePlayingAdv,
  CmsFloatingAdv,
  CmsPopupAdv,
  CmsTopFunction
} = CmsComponents
</script>

<template>
  <Scrollbar class="h-screen overflow-x-hidden bg-black">
    <div class="w-full mx-auto overflow-hidden max-w-7xl">
      <a-typography-title class="text-white" :level="2">组件库示例</a-typography-title>
      <div class="grid grid-cols-1 gap-6">
        <a-card title="首页分类标签">
          <div class="flex flex-wrap gap-4 w-[375px]">
            <CmsHeaderTabbar
              :type="1"
              :selectText="{ color: '#000000', fontSize: '20px', borderColor: '#000' }"
              :text="{ color: '#48494D', fontSize: '14px' }"
              :headerStyle="{ backgroundColor: 'white' }"
            />
          </div>
        </a-card>
        <a-card title="搜索条">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsSearchBar :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="公告栏">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`" class="w-[375px]">
              <CmsNoticeBar :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="轮播图">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsRotationView :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="小说图集区域">
          <div class="flex flex-wrap gap-4 w-[375px]">
            <CmsAtlasArea />
          </div>
        </a-card>
        <a-card title="宫格">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsGridView :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="卡片">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsCardView :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="影人筛选条件">
          <div class="flex flex-wrap gap-4 w-[375px]">
            <CmsFilmmakersFilter
              :selectText="{
                color: '#ff613f',
                fontSize: '14px',
                backgroundColor: 'rgba(255, 97, 63,0.1)',
                borderRadius: '4px',
                borderColor: 'rgba(255, 97, 63,0)'
              }"
              :text="{
                color: '#48494D',
                fontSize: '14px',
                backgroundColor: 'rgba(255, 255, 255,0)',
                borderRadius: '4px',
                borderColor: 'rgba(255, 255, 255,0)'
              }"
            />
          </div>
        </a-card>
        <a-card title="影人">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 2" :key="i" :title="`样式${i}`" class="w-[375px]">
              <CmsStarGrid :text="{ color: '#000000' }" :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="底部标签栏">
          <div class="flex flex-wrap gap-4 w-[375px]">
            <CmsBottomBar active="home" />
          </div>
        </a-card>
        <a-card title="头部header">
          <div class="flex flex-wrap gap-4 w-[375px]">
            <CmsVideoHeader :title="'标题'" showSearch />
          </div>
        </a-card>
        <a-card title="横向滚动宫格">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 4" :key="i" :title="`样式${i}`">
              <CmsScrollGrid :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="播放组件">
          <div class="flex flex-wrap gap-4 w-[375px]">
            <CmsPlayerView :type="1" />
          </div>
        </a-card>
        <a-card title="视频简介">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsVideoIntroduction :type="1" />
          </div>
        </a-card>
        <a-card title="播放线路">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsPlayerLines :componentType="1" />
          </div>
        </a-card>
        <a-card title="选集">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsSelectWorks :type="i" />
            </a-card>
          </div>
        </a-card>

        <a-card title="视频简介页面头部">
          <div class="flex flex-wrap gap-4 w-[375px]">
            <CmsVideoView />
          </div>
        </a-card>
        <a-card title="视频简介页面视频名称">
          <div class="flex flex-wrap gap-4 w-[375px]">
            <CmsVideoName />
          </div>
        </a-card>
        <a-card title="视频简介页面播放次数">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsVideoNumber />
          </div>
        </a-card>
        <a-card title="视频简介页面视频标签">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsVideoLabel />
          </div>
        </a-card>
        <a-card title="视频简介页面演员列表">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsActorList />
          </div>
        </a-card>
        <a-card title="视频简介页面影片介绍">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsPlayerVideoIntroduction />
          </div>
        </a-card>

        <a-card title="演员详情页面演员头像">
          <div class="flex flex-wrap gap-4 w-[375px]">
            <CmsActorAvatar />
          </div>
        </a-card>
        <a-card title="演员详情页面演员简介">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsActorDescription :type="2" :expandType="2" showExpand />
          </div>
        </a-card>
        <a-card title="演员详情页面演员相关作品">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsActorWorks />
          </div>
        </a-card>
        <a-card title="综艺展开列表">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsVarietyList :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="筛选分类条">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsFilterView :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="换一换">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsRenewView :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="按钮">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsButtonStyle :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="小说图片">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsArticleImg />
          </div>
        </a-card>
        <a-card title="小说状态">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsArticleState />
          </div>
        </a-card>
        <a-card title="小说简介">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsArticleIntroduction :type="1" showExpand :text="{ backgroundColor: 'white' }" />
          </div>
        </a-card>
        <a-card title="底部功能按钮">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsBottomFunction :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="图集列表">
          <div class="flex flex-wrap gap-4 w-[375px]">
            <a-card size="small" :bordered="false" v-for="i in 2" :key="i" :title="`样式${i}`">
              <CmsAtlasLsit :type="i" :cardStyle="{ backgroundColor: '#FFF4F0' }" :selectStyle="i === 1 ? 2 : 3" />
            </a-card>
          </div>
        </a-card>
        <a-card title="选项卡片">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`" class="w-[375px]">
              <TabCardView :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="文章分类标签">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`" class="w-[375px]">
              <CmsArticleTags :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="文章简介组件">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 2" :key="i" :title="`样式${i}`" class="w-[375px]">
              <CmsProfileButton :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="收藏阅读">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`" class="w-[375px]">
              <CmsFavoritesRead :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="评分组件">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`" class="w-[375px]">
              <CmsScoreView :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="文章设置组件">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`" class="w-[375px]">
              <CmsArticleSetting :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="顶部功能">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`" class="w-[375px]">
              <CmsTopFunction :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="标签类">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsLabelView :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="购买提示">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 2" :key="i" :title="`样式${i}`">
              <CmsBuyOrder :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="会员个人模块">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsVipMember :type="i" />
            </a-card>
          </div>
        </a-card>

        <a-card title="会员套餐/支付">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsVipPay :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="图集—分类宫格">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 3" :key="i" :title="`样式${i}`">
              <CmsCategoryGrid :type="i" :typeView="'novel'" />
            </a-card>
          </div>
        </a-card>
        <a-card title="图集—推荐宫格">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 4" :key="i" :title="`样式${i}`">
              <CmsRecommendGrid :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="小说—推荐宫格">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 4" :key="i" :title="`样式${i}`">
              <CmsNovelGrid :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="小说—列表">
          <div class="flex flex-wrap gap-4">
            <a-card size="small" :bordered="false" v-for="i in 2" :key="i" :title="`样式${i}`">
              <CmsNovelList :type="i" />
            </a-card>
          </div>
        </a-card>
        <a-card title="弹窗广告">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsPopupAdv />
          </div>
        </a-card>
        <a-card title="底部浮层广告">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsFloatingAdv />
          </div>
        </a-card>
        <a-card title="横幅广告">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsBannerAdv />
          </div>
        </a-card>
        <a-card title="暂停广告">
          <div class="flex flex-wrap gap-4 w-[375px] bg-white">
            <CmsSuspendAdv />
          </div>
        </a-card>
        <a-card title="播放前广告">
          <div class="flex flex-wrap gap-4 w-[375px] relative bg-white">
            <CmsBeforePlayingAdv />
          </div>
        </a-card>
      </div>
    </div>
  </Scrollbar>
</template>

<style lang="less" scoped>
@import url('ant-design-vue/dist/antd.less');

::v-deep(.ant-card) {
  .ant-card-head {
    @apply border-none bg-transparent text-white;
  }
  @apply bg-[#303030] border border-solid border-[#303030];
  .ant-card-body {
    @apply bg-black border-none;
    .ant-card-body {
      @apply px-0 border-none;
    }
    p {
      @apply m-0;
    }
    .ant-card,
    .ant-card-head {
      @apply border-none bg-transparent text-white;
    }
  }
}
</style>
